<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入用户名" v-model="search.username" />
        </el-col>
        <el-col :span="8">
          <el-input placeholder="请输入电话号码" v-model="search.phone" />
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="searchData">搜索</el-button>
          <el-button type="warning" @click="resetSearch">重置筛选条件</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="avatar" label="头像" width="180">
          <template #default="scope">
            <img :src="scope.row.avatar" alt="Avatar" style="max-width: 100%; height: auto;" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="gender" label="性别" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="phone" label="手机号码" width="180" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="remark" label="备注信息" width="180" />
        <el-table-column prop="status" label="账号状态" width="180">
          <template #default="scope">
            <el-switch v-model="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-model:current-page="currentPage"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      search: {
        username: '',
        phone: ''
      },
      tableData: [
        // 示例数据
        { id: 1, username: 'user1', avatar: 'https://placehold.co/100x100', name: '张三', gender: '男', age: 25, phone: '13800138000', createTime: '2023-01-01', remark: '备注信息', status: true },
        { id: 2, username: 'user2', avatar: 'https://placehold.co/100x100', name: '李四', gender: '女', age: 30, phone: '13900139000', createTime: '2023-02-01', remark: '备注信息', status: false }
      ],
      total: 100,
      currentPage: 1
    };
  },
  methods: {
    searchData() {
      // 搜索逻辑
    },
    resetSearch() {
      this.search = {
        username: '',
        phone: ''
      };
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleEdit(index, row) {
      // 修改逻辑
    },
    handleDelete(index, row) {
      // 删除逻辑
    }
  }
};
</script>

<style scoped>
</style>